<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('项目回款明细') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目名称')" prop="dealName">
        <el-input v-model="queryParams.dealName" :placeholder="$t('项目名称')" clearable />
      </el-form-item>
      <el-form-item :label="$t('公司名称')" prop="companyName">
        <el-input v-model="queryParams.companyName" :placeholder="$t('公司名称')" clearable />
      </el-form-item>
      <el-form-item :label="$t('负责人')" prop="principal">
        <el-input v-model="queryParams.principal" :placeholder="$t('负责人')" clearable />
      </el-form-item>
      <el-form-item :label="$t('投资主体')" prop="investName">
        <el-input v-model="queryParams.investName" :placeholder="$t('投资主体')" clearable />
      </el-form-item>
      <el-form-item :label="$t('回款类型')" prop="distributionType">
        <el-select v-model="queryParams.distributionType" :placeholder="$t('回款类型')">
          <el-option
            v-for="(dict, index) in distributionTypeOptions"
            :key="index"
            :label="$t(dict.dictLabel)"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('回款时间')" prop="distributionDate">
        <DatePicker v-model="distributionDates" type="daterange" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
        <el-button
          v-hasPermi="['deal:distribution:exportReport']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t("导出") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" tooltip-effect="darkTable" :data="dealDistributionDetailsVos" :span-method="arraySpanMethod" class="noneHoverBg" border>
      <el-table-column :label="$t('项目名称')" :show-overflow-tooltip="true" align="center" prop="dealName" min-width="200" fixed="left">
        <template slot-scope="scope">
          <router-link
            target="_blank"
            :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId}}"
            class="link_a"
          >{{ scope.row.dealName }}</router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('公司名称')" align="center" prop="companyName" min-width="200" show-overflow-tooltip />
      <el-table-column :label="$t('负责人')" align="center" prop="principal" show-overflow-tooltip />
      <el-table-column :label="$t('投资主体')" align="center" prop="investName" min-width="200" show-overflow-tooltip />
      <el-table-column :label="$t('累计投资金额') + $t('金额单位')" align="center" prop="totalInvestAmount" min-width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.totalInvestAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('总回款金额') + $t('金额单位')" align="center" prop="totalDistributionAmount" min-width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.totalDistributionAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('最新持股比例(%)')" align="center" prop="latestShareholdingRatio" min-width="120" show-overflow-tooltip />
      <el-table-column :label="$t('最新IRR(%)')" align="center" prop="latestIrr" min-width="100" show-overflow-tooltip />
      <el-table-column :label="$t('回款类型')" align="center" prop="distributionType" :formatter="distributionTypeFormat" min-width="80" show-overflow-tooltip />
      <el-table-column :label="$t('回款时间')" align="center" prop="distributionDate" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.distributionDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('回款总额') + $t('金额单位')" align="center" prop="amountDistribution" min-width="80">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.amountDistribution, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('回款后持股比例(%)')" align="center" prop="exitShareRatio" min-width="120" show-overflow-tooltip />
      <el-table-column :label="$t('本金') + $t('金额单位')" align="center" prop="amountPrincipal" min-width="100">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.amountPrincipal, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('收益') + $t('金额单位')" align="center" prop="amountIncome" min-width="100">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.amountIncome, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('分红') + $t('金额单位')" align="center" prop="amountBonus" min-width="100">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.amountBonus, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('其它') + $t('金额单位')" align="center" prop="amountOthers" min-width="100">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.amountOthers, 'w') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getDistributionDetailsStatistics } from '@/api/deal/distribution/dealDistribution'
import { downLoadFileOpen } from '@/utils/zipdownload'

  export default {
        data() {
          return {
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 回款时间区间
            distributionDates: [],
            // 查询参数
            queryParams: {
              dealName: undefined,
              companyName: undefined,
              principal: undefined,
              investName: undefined,
              startDate: undefined,
              endDate: undefined,
              distributionType: undefined,
              distributionDate: undefined,
              pageNum: 1,
              pageSize: 10
            },
            // 表单参数
            form: {},
            // 项目投资回款详细
            dealDistributionDetailsVos: [],
            // 回款类型字典
            distributionTypeOptions: []
          }
        },
      created() {
        this.getList()
        this.getDicts('distribution_mode').then(response => {
          this.distributionTypeOptions = response.data
        })
      },
      methods: {
        getList() {
          this.loading = true
          if (this.distributionDates != null && this.distributionDates.length > 1) {
            this.queryParams.startDate = this.distributionDates[0]
            this.queryParams.endDate = this.distributionDates[1]
          } else {
            this.queryParams.startDate = undefined
            this.queryParams.endDate = undefined
          }
          getDistributionDetailsStatistics(this.queryParams).then(response => {
            this.dealDistributionDetailsVos = response.rows
            this.total = response.total
            this.loading = false
          })
        },
        /** 搜索按钮操作 */
        queryHandle() {
          this.queryParams.pageNum = 1
          this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm('queryForm')
          this.distributionDates = undefined
          this.queryHandle()
        },
        // 回款类型字典翻译
        // eslint-disable-next-line no-unused-vars
        distributionTypeFormat(row, column) {
          return this.selectDictLabel(this.distributionTypeOptions, row.distributionType)
        },
        // eslint-disable-next-line no-unused-vars
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex <= 2) {
            const spanArr = this.deal()
            for (let i = 0; i < spanArr.length; i++) {
              const _row = spanArr[rowIndex]
              return {
                rowspan: _row,
                colspan: 1
              }
            }
          }
          if (columnIndex >= 3 && columnIndex <= 7) {
            const spanArr = this.invest()
            for (let i = 0; i < spanArr.length; i++) {
              const _row = spanArr[rowIndex]
              return {
                rowspan: _row,
                colspan: 1
              }
            }
          }
        },
        deal() {
          // 二维数组，用于存放单元格合并规则
          const spanArr = []
          // 用于存储相同项的开始index
          let position = 0
          this.dealDistributionDetailsVos.forEach((item, index) => {
            if (index === 0) {
              spanArr.push(1)
              position = 0
            } else {
              if (this.dealDistributionDetailsVos[index].dealId === this.dealDistributionDetailsVos[index - 1].dealId) {
                spanArr[position] += 1 // 有相同项
                spanArr.push(0) // 名称相同后往数组里面加一项0
              } else {
                spanArr.push(1) // 同列的前后两行单元格不相同
                position = index
              }
            }
          })
          return spanArr
        },
        invest() {
          // 二维数组，用于存放单元格合并规则
          const spanArr = []
          // 用于存储相同项的开始index
          let position = 0
          this.dealDistributionDetailsVos.forEach((item, index) => {
            if (index === 0) {
              spanArr.push(1)
              position = 0
            } else {
              if ((this.dealDistributionDetailsVos[index].dealId === this.dealDistributionDetailsVos[index - 1].dealId) && (this.dealDistributionDetailsVos[index].investorId === this.dealDistributionDetailsVos[index - 1].investorId)) {
                spanArr[position] += 1 // 有相同项
                spanArr.push(0) // 名称相同后往数组里面加一项0
              } else {
                spanArr.push(1) // 同列的前后两行单元格不相同
                position = index
              }
            }
          })
          return spanArr
        },
        /** 导出按钮操作 */
        exportHandle() {
          var _this = this
          const query = this.queryParams
          this.$confirm(this.$t('是否确认导出?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
          }).then(function() {
            var dealName = _this.isEmpty(query.dealName) ? '' : query.dealName
            var companyName = _this.isEmpty(query.companyName) ? '' : query.companyName
            var principal = _this.isEmpty(query.principal) ? '' : query.principal
            var investName = _this.isEmpty(query.investName) ? '' : query.investName
            var startDate = _this.isEmpty(query.startDate) ? '' : query.startDate
            var endDate = _this.isEmpty(query.endDate) ? '' : query.endDate
            var distributionType = _this.isEmpty(query.distributionType) ? '' : query.distributionType
            var distributionDate = _this.isEmpty(query.distributionDate) ? '' : query.distributionDate
            var param = '?dealName=' + dealName + '&companyName=' + companyName + '&principal=' + principal + '&investName=' + investName + '&startDate=' + startDate +
              '&endDate=' + endDate + '&distributionType=' + distributionType + '&distributionDate=' + distributionDate
            return downLoadFileOpen('/distribution/dealDistribution/exportReport' + param)
          }).catch(function() {
          })
        }
      }
    }
</script>

<style scoped>

</style>
